<!--
 * @Descripttion: 表格自定义列按钮
 * @LastEditors: xzh
 * @LastEditTime: 2023-08-07 00:56:40
-->
<template>
  <el-dropdown
    trigger="click"
    :hide-on-click="false"
    popper-class="table-custom-popper"
    @visible-change="!$event && handleSaveUserEvn()"
  >
    <el-button :icon="Setting" />
    <template #dropdown>
      <el-dropdown-menu ref="dropdownMenuRef">
        <el-dropdown-item
          v-for="(column, index) in customBtnParam.columnArr"
          :key="index"
          ><el-checkbox
            v-model="column.visible"
            v-show="!column.type"
            :label="column.title"
            @change="handleColumnInfoChange(column)"
        /></el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { ref, reactive, inject, nextTick } from "vue";
import { Setting } from "@element-plus/icons-vue";
import type { object_Inf } from "@/utils/typings/index.type";
import { propsParam_Inf } from "../../index.type";
// import Sortable from "sortablejs";
import Dile_Methods from "@/utils/methods";

/**
 * @Author: xzh
 * @Descripttion:表格传入参数
 * @Param:
 */
let propsParam = reactive<propsParam_Inf | object_Inf>(
  inject("propsParam") || {}
);
/**
 * @Author: xzh
 * @Descripttion:下拉菜单实例
 * @Param:
 */
let dropdownMenuRef = ref<any>(null);
/**
 * @Author: xzh
 * @Descripttion:自定义列按钮
 * @Param:
 */
let customBtnParam = reactive<object_Inf>({
  evnOid: "",
  evnColumnArr: [],
  columnArr: [],
  tableRef: null,
});
/**
 * @Author: xzh
 * @Descripttion: 加载表格自定义按钮
 * @Param:
 */
let initTableCustomBtn = async (tableRef: object_Inf) => {
  let { evnCode } = propsParam,
    { columnArr: currentArr } = customBtnParam;
  if (!evnCode) {
    return false;
  }
  customBtnParam.tableRef = tableRef;
  //获取表格列
  let columnArr =
    currentArr.length > 0 ? currentArr : await formatTableColumn();

  Object.assign(customBtnParam, {
    columnArr,
  });
  await nextTick();
  //加载下拉菜单拖拽
  initDropdownSortable();
};

/**
 * @Author: xzh
 * @Descripttion:格式化表格显示列
 * @Param:
 */
let formatTableColumn = async () => {
  let { tableRef } = customBtnParam,
    //获取表格列
    { fullColumn } = tableRef.getTableColumn(),
    columnArr = fullColumn;
  //获取用户配置信息
  let evnColumnArr = await handleGetUserEvn();
  //根据配置修改当前列内容
  columnArr
    .filter((x: object_Inf) =>
      evnColumnArr.map((y: object_Inf) => y.property).includes(x.property)
    )
    .forEach((column: object_Inf) => {
      let evnColumn = evnColumnArr.find(
        (x: object_Inf) => x.property == column.property
      );
      Object.assign(column, evnColumn);
    });
  //恢复记录排序
  evnColumnArr
    .filter((x: object_Inf) => !!x.order)
    .sort(
      (x: object_Inf, y: object_Inf) =>
        (Number(x.order) || 0) - (Number(y.order) || 0)
    )
    .forEach((evnColumn: object_Inf) => {
      let { property, order } = evnColumn;
      let oldIndex = columnArr.findIndex(
        (x: object_Inf) => x.property == property
      );
      //调换对象数组位置
      oldIndex > -1 &&
        Dile_Methods.exchangeArrIndex(columnArr, oldIndex, order);
    });

  //重新加载表格列
  tableRef.loadColumn(columnArr);

  return columnArr;
};

/**
 * @Author: xzh
 * @Descripttion:加载下拉菜单拖拽
 * @Param:
 */
let initDropdownSortable = () => {
  let { $el } = dropdownMenuRef.value;
  //渲染下拉菜单拖拽
  // new Sortable($el, {
  //   animation: 150,
  //   onEnd: (evt: object_Inf) => {
  //     let { oldIndex, newIndex } = evt,
  //       { tableRef } = customBtnParam;
  //     //获取表格列
  //     let { fullColumn: columnArr } = tableRef.getTableColumn();
  //     //调换对象数组位置
  //     let item = Dile_Methods.exchangeArrIndex(columnArr, oldIndex, newIndex);
  //     //重新加载表格列
  //     tableRef.loadColumn(columnArr);
  //     //修改列信息
  //     handleColumnInfoChange({
  //       ...item,
  //       order: newIndex,
  //     });
  //     //刷新配置order信息
  //     refreshEvnColumnOder(columnArr);
  //   },
  // });
};
/**
 * @Author: xzh
 * @Descripttion:刷新配置列排序号
 * @Param:
 */
let refreshEvnColumnOder = (columnArr: Array<object_Inf>) => {
  //根据最新列顺序修改缓存排序
  customBtnParam.evnColumnArr
    .filter((x: object_Inf) => !!x.order)
    .forEach((evnColumn: object_Inf) => {
      let index = columnArr.findIndex(
        (x: object_Inf) => x.property == evnColumn.property
      );
      index > -1 && (evnColumn.order = index);
    });
};

/**
 * @Author: xzh
 * @Descripttion:列信息修改更改
 * @Param:
 * @param {*} column
 */
let handleColumnInfoChange = (column: object_Inf) => {
  let { evnColumnArr } = customBtnParam,
    index = (evnColumnArr || []).findIndex(
      (x: object_Inf) => x.property == column.property
    );
  //记录更改配置列信息
  index == -1
    ? customBtnParam.evnColumnArr.push(column)
    : (customBtnParam.evnColumnArr[index] = column);
  //刷新表格列
  handleRefreshColumn();
};

/**
 * @Author: xzh
 * @Descripttion:刷新表格列
 * @Param:
 */
let handleRefreshColumn = () => {
  let { tableRef } = customBtnParam;
  tableRef.refreshColumn();
};

/**
 * @Author: xzh
 * @Descripttion:保存用户配置
 * @Param:
 */
let handleSaveUserEvn = () => {
  // let { evnOid, evnColumnArr } = customBtnParam,
  //   { evnCode } = propsParam;
  // //获取表格列-排除显示&&列宽是默认宽度
  // let columnValue = evnColumnArr
  //   .filter((x: object_Inf) => !(!!x.visible && x.width == 150 && !x.order))
  //   //只保存关联字段
  //   .map(({ visible, width, property, order }: object_Inf) => ({
  //     visible,
  //     width,
  //     property,
  //     order,
  //   }));
  // //!!表格code&&保存用户配置
  // !!evnCode &&
  //   Xzh_Api.saveUserEnvData([
  //     {
  //       Code: evnCode,
  //       Oid: evnOid,
  //       UserOid: Plm_Methods.emptyGuid(0),
  //       Value: JSON.stringify(columnValue),
  //     },
  //   ]);
};
/**
 * @Author: xzh
 * @Descripttion:获取用户配置
 * @Param:
 */
let handleGetUserEvn = async () => {
  // let { evnCode } = propsParam;
  // //获取最新用户配置
  // let { Value, Oid } = (await Plm_Api.getUserEnvData([evnCode])).at(-1) || {},
  //   evnColumnArr = JSON.parse(Value || "[]");
  // Object.assign(customBtnParam, {
  //   evnOid: Oid,
  //   evnColumnArr,
  // });
  // return evnColumnArr;
  return [];
};

//暴露数据或方法
defineExpose({
  initTableCustomBtn,
  handleColumnInfoChange,
  handleSaveUserEvn,
});
</script>
<style lang="scss" scoped>
.el-dropdown {
  .el-button {
    height: 2.1rem;
    width: 2.1rem;
    background: transparent;
    :deep(.el-icon) {
      color: transparent;
    }
  }
  .el-button:hover {
    background: var(--background-color);
    :deep(.el-icon) {
      color: var(--font-color);
    }
  }
}
</style>
<style lang="scss">
.table-custom-popper {
  max-height: 20rem;
  overflow: auto;
  .el-dropdown-menu__item {
    padding: 0 1rem;
  }
}
</style>
